<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>区块链资产管理系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36D399',
            accent: '#8B5CF6',
            neutral: '#1F2937',
            'base-100': '#FFFFFF',
            info: '#3ABFF8',
            success: '#36D399',
            warning: '#FBBD23',
            error: '#F87272',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      }
      .btn-hover {
        @apply transition-all duration-300 hover:shadow-lg transform hover:-translate-y-1;
      }
      .input-focus {
        @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition duration-200;
      }
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-md fixed top-0 left-0 right-0 z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-link text-primary text-2xl"></i>
        <h1 class="text-xl md:text-2xl font-bold text-neutral">区块链资产管理系统</h1>
      </div>
      <nav class="hidden md:flex items-center space-x-8">
        <a href="#create" class="text-gray-700 hover:text-primary transition-colors">资产上链</a>
        <a href="#query" class="text-gray-700 hover:text-primary transition-colors">资产查询</a>
        <a href="#transfer" class="text-gray-700 hover:text-primary transition-colors">资产转移</a>
      </nav>
      <button class="md:hidden text-neutral text-xl" id="menuBtn">
        <i class="fa fa-bars"></i>
      </button>
    </div>
    <!-- 移动端菜单 -->
    <div class="md:hidden hidden bg-white border-t" id="mobileMenu">
      <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
        <a href="#create" class="text-gray-700 hover:text-primary py-2 transition-colors">资产上链</a>
        <a href="#query" class="text-gray-700 hover:text-primary py-2 transition-colors">资产查询</a>
        <a href="#transfer" class="text-gray-700 hover:text-primary py-2 transition-colors">资产转移</a>
      </div>
    </div>
  </header>

  <!-- 主内容区域 -->
  <main class="container mx-auto px-4 pt-24 pb-16">
    <!-- 状态指示器 -->
    <div class="fixed bottom-4 right-4 z-50 flex items-center bg-white rounded-full shadow-lg p-3 transition-all duration-300 transform hover:scale-105" id="statusIndicator">
      <div class="w-3 h-3 rounded-full bg-green-500 animate-pulse mr-2"></div>
      <span class="text-sm text-gray-700">已连接到区块链</span>
    </div>

    <!-- 欢迎区域 -->
    <section class="mb-12 text-center">
      <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral mb-4">区块链资产管理平台</h2>
      <p class="text-gray-600 max-w-2xl mx-auto">安全、透明、高效的资产数字化管理解决方案，基于Hyperledger Fabric区块链技术构建。</p>
    </section>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
      <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1">
        <div class="flex justify-between items-start mb-4">
          <div>
            <p class="text-gray-500 text-sm">总资产</p>
            <h3 class="text-2xl font-bold text-neutral" id="totalAssets">0</h3>
          </div>
          <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
            <i class="fa fa-cubes text-primary"></i>
          </div>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
          <div class="bg-primary h-2 rounded-full" style="width: 75%"></div>
        </div>
      </div>
      
      <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1">
        <div class="flex justify-between items-start mb-4">
          <div>
            <p class="text-gray-500 text-sm">今日新增</p>
            <h3 class="text-2xl font-bold text-neutral" id="todayNew">0</h3>
          </div>
          <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
            <i class="fa fa-plus-circle text-secondary"></i>
          </div>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
          <div class="bg-secondary h-2 rounded-full" style="width: 45%"></div>
        </div>
      </div>
      
      <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1">
        <div class="flex justify-between items-start mb-4">
          <div>
            <p class="text-gray-500 text-sm">交易总数</p>
            <h3 class="text-2xl font-bold text-neutral" id="totalTransactions">0</h3>
          </div>
          <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center">
            <i class="fa fa-exchange text-accent"></i>
          </div>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
          <div class="bg-accent h-2 rounded-full" style="width: 60%"></div>
        </div>
      </div>
    </div>

    <!-- 资产上链 -->
    <section id="create" class="mb-12 bg-white rounded-xl shadow-lg p-6 md:p-8 transform transition-all duration-500 hover:shadow-xl">
      <div class="flex items-center mb-6">
        <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
          <i class="fa fa-plus text-primary text-xl"></i>
        </div>
        <h3 class="text-xl md:text-2xl font-bold text-neutral">资产上链</h3>
      </div>
      <form id="createForm" class="space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label for="createId" class="block text-sm font-medium text-gray-700 mb-1">资产ID</label>
            <input type="text" id="createId" name="createId" class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus" placeholder="请输入资产ID" required>
          </div>
          <div>
            <label for="createOwner" class="block text-sm font-medium text-gray-700 mb-1">所有者</label>
            <input type="text" id="createOwner" name="createOwner" class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus" placeholder="请输入所有者" required>
          </div>
          <div>
            <label for="createName" class="block text-sm font-medium text-gray-700 mb-1">资产名称</label>
            <input type="text" id="createName" name="createName" class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus" placeholder="请输入资产名称" required>
          </div>
          <div>
            <label for="createInfo" class="block text-sm font-medium text-gray-700 mb-1">资产信息</label>
            <input type="text" id="createInfo" name="createInfo" class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus" placeholder="请输入资产信息" required>
          </div>
        </div>
        <div class="flex justify-end">
          <button type="submit" class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg font-medium btn-hover flex items-center">
            <i class="fa fa-chain mr-2"></i> 提交上链
          </button>
        </div>
      </form>
      <div id="createResult" class="mt-6 hidden">
        <div class="border-t pt-4">
          <h4 class="font-medium text-gray-700 mb-2">操作结果</h4>
          <div id="createOutput" class="bg-gray-50 p-4 rounded-lg text-sm overflow-x-auto"></div>
        </div>
      </div>
    </section>

    <!-- 资产查询 -->
    <section id="query" class="mb-12 bg-white rounded-xl shadow-lg p-6 md:p-8 transform transition-all duration-500 hover:shadow-xl">
      <div class="flex items-center mb-6">
        <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
          <i class="fa fa-search text-primary text-xl"></i>
        </div>
        <h3 class="text-xl md:text-2xl font-bold text-neutral">资产查询</h3>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-12 gap-4 mb-6">
        <div class="md:col-span-10">
          <label for="queryId" class="block text-sm font-medium text-gray-700 mb-1">资产ID</label>
          <input type="text" id="queryId" name="queryId" class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus" placeholder="请输入要查询的资产ID">
        </div>
        <div class="md:col-span-2 flex items-end">
          <button id="queryBtn" class="w-full bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg font-medium btn-hover flex items-center justify-center">
            <i class="fa fa-search mr-2"></i> 查询
          </button>
        </div>
      </div>
      <div id="queryResult" class="mt-6 hidden">
        <div class="border-t pt-4">
          <h4 class="font-medium text-gray-700 mb-2">查询结果</h4>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-gray-50 p-4 rounded-lg">
              <div class="flex items-center mb-3">
                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center mr-2">
                  <i class="fa fa-id-card text-primary"></i>
                </div>
                <h5 class="font-medium text-gray-800">资产详情</h5>
              </div>
              <div id="queryDetails" class="space-y-2 text-sm">
                <p><span class="text-gray-500">资产ID:</span> <span id="queryOutputId">-</span></p>
                <p><span class="text-gray-500">所有者:</span> <span id="queryOutputOwner">-</span></p>
                <p><span class="text-gray-500">资产名称:</span> <span id="queryOutputName">-</span></p>
                <p><span class="text-gray-500">资产信息:</span> <span id="queryOutputInfo">-</span></p>
              </div>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg">
              <div class="flex items-center mb-3">
                <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
                  <i class="fa fa-history text-primary"></i>
                </div>
                <h5 class="font-medium text-gray-800">交易记录</h5>
              </div>
              <div id="queryTransactions" class="space-y-2 text-sm max-h-40 overflow-y-auto">
                <p class="text-gray-500 italic">暂无交易记录</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 资产转移 -->
    <section id="transfer" class="mb-12 bg-white rounded-xl shadow-lg p-6 md:p-8 transform transition-all duration-500 hover:shadow-xl">
      <div class="flex items-center mb-6">
        <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
          <i class="fa fa-exchange text-accent text-xl"></i>
        </div>
        <h3 class="text-xl md:text-2xl font-bold text-neutral">资产转移</h3>
      </div>
      <form id="transferForm" class="space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label for="transferId" class="block text-sm font-medium text-gray-700 mb-1">资产ID</label>
            <input type="text" id="transferId" name="transferId" class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus" placeholder="请输入要转移的资产ID" required>
          </div>
          <div>
            <label for="transferOwner" class="block text-sm font-medium text-gray-700 mb-1">新所有者</label>
            <input type="text" id="transferOwner" name="transferOwner" class="w-full px-4 py-2 border border-gray-300 rounded-lg input-focus" placeholder="请输入新所有者" required>
          </div>
        </div>
        <div class="flex justify-end">
          <button type="submit" class="bg-accent hover:bg-accent/90 text-white px-6 py-2 rounded-lg font-medium btn-hover flex items-center">
            <i class="fa fa-exchange mr-2"></i> 转移资产
          </button>
        </div>
      </form>
      <div id="transferResult" class="mt-6 hidden">
        <div class="border-t pt-4">
          <h4 class="font-medium text-gray-700 mb-2">操作结果</h4>
          <div id="transferOutput" class="bg-gray-50 p-4 rounded-lg text-sm overflow-x-auto"></div>
        </div>
      </div>
    </section>

    <!-- 最近交易记录 -->
    <section class="mb-12 bg-white rounded-xl shadow-lg p-6 md:p-8 transform transition-all duration-500 hover:shadow-xl">
      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center">
          <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4">
            <i class="fa fa-list-alt text-secondary text-xl"></i>
          </div>
          <h3 class="text-xl md:text-2xl font-bold text-neutral">最近交易记录</h3>
        </div>
        <button class="text-primary hover:text-primary/80 text-sm font-medium flex items-center">
          查看全部 <i class="fa fa-chevron-right ml-1 text-xs"></i>
        </button>
      </div>
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">交易ID</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">资产ID</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作类型</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发起者</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间戳</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200" id="transactionsTable">
            <tr class="text-center">
              <td colspan="6" class="px-6 py-12 text-gray-500">
                <div class="flex flex-col items-center">
                  <i class="fa fa-history text-4xl mb-2 text-gray-300"></i>
                  <p>暂无交易记录</p>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-neutral text-white py-8">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div>
          <div class="flex items-center space-x-2 mb-4">
            <i class="fa fa-link text-primary text-xl"></i>
            <h2 class="text-xl font-bold">区块链资产管理系统</h2>
          </div>
          <p class="text-gray-400 text-sm">安全、透明、高效的资产数字化管理解决方案，基于Hyperledger Fabric区块链技术构建。</p>
        </div>
        <div>
          <h3 class="text-lg font-medium mb-4">快速链接</h3>
          <ul class="space-y-2 text-sm text-gray-400">
            <li><a href="#create" class="hover:text-primary transition-colors">资产上链</a></li>
            <li><a href="#query" class="hover:text-primary transition-colors">资产查询</a></li>
            <li><a href="#transfer" class="hover:text-primary transition-colors">资产转移</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-lg font-medium mb-4">联系我们</h3>
          <ul class="space-y-2 text-sm text-gray-400">
            <li class="flex items-center"><i class="fa fa-envelope-o mr-2 text-primary"></i> support@blockchain.com</li>
            <li class="flex items-center"><i class="fa fa-phone mr-2 text-primary"></i> +86 123 4567 8901</li>
            <li class="flex items-center"><i class="fa fa-map-marker mr-2 text-primary"></i> 北京市海淀区中关村科技园区</li>
          </ul>
        </div>
      </div>
      <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-500 text-sm">
        <p>&copy; 2025 区块链资产管理系统 版权所有</p>
      </div>
    </div>
  </footer>

  <!-- 模态框 -->
  <div id="modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-xl max-w-md w-full mx-4 transform transition-all duration-300 scale-95 opacity-0" id="modalContent">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-bold text-neutral" id="modalTitle">操作结果</h3>
          <button id="closeModal" class="text-gray-400 hover:text-gray-600">
            <i class="fa fa-times"></i>
          </button>
        </div>
        <div class="mb-6" id="modalBody">
          <p>操作成功完成</p>
        </div>
        <div class="flex justify-end">
          <button id="modalBtn" class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg font-medium btn-hover">
            确定
          </button>
        </div>
      </div>
    </div>
  </div>

  <script>
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 10) {
        navbar.classList.add('py-2', 'shadow-lg');
        navbar.classList.remove('py-3', 'shadow-md');
      } else {
        navbar.classList.add('py-3', 'shadow-md');
        navbar.classList.remove('py-2', 'shadow-lg');
      }
    });

    // 移动端菜单
    const menuBtn = document.getElementById('menuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    menuBtn.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
      if (mobileMenu.classList.contains('hidden')) {
        menuBtn.innerHTML = '<i class="fa fa-bars"></i>';
      } else {
        menuBtn.innerHTML = '<i class="fa fa-times"></i>';
      }
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
          window.scrollTo({
            top: target.offsetTop - 80,
            behavior: 'smooth'
          });
          // 关闭移动端菜单
          if (!mobileMenu.classList.contains('hidden')) {
            mobileMenu.classList.add('hidden');
            menuBtn.innerHTML = '<i class="fa fa-bars"></i>';
          }
        }
      });
    });

    // 模拟数据
    const mockAssets = [
      { id: 'ASSET-001', owner: '张三', name: '办公楼', info: '北京市朝阳区建国路88号' },
      { id: 'ASSET-002', owner: '李四', name: '生产设备', info: 'CNC加工中心' },
      { id: 'ASSET-003', owner: '王五', name: '专利技术', info: '一种新型材料制备方法' },
      { id: 'ASSET-004', owner: '赵六', name: '运输车辆', info: '重型货车' },
      { id: 'ASSET-005', owner: '孙七', name: '商业用地', info: '上海市浦东新区张江高科技园区' }
    ];

    const mockTransactions = [
      { txId: 'TX-20250527001', assetId: 'ASSET-003', type: 'CREATE', initiator: '王五', timestamp: '2025-05-27 10:30:45', status: '成功' },
      { txId: 'TX-20250527002', assetId: 'ASSET-001', type: 'TRANSFER', initiator: '张三', timestamp: '2025-05-27 09:15:20', status: '成功' },
      { txId: 'TX-20250526003', assetId: 'ASSET-005', type: 'CREATE', initiator: '孙七', timestamp: '2025-05-26 16:42:18', status: '成功' },
      { txId: 'TX-20250526004', assetId: 'ASSET-004', type: 'CREATE', initiator: '赵六', timestamp: '2025-05-26 11:05:33', status: '成功' },
      { txId: 'TX-20250525005', assetId: 'ASSET-002', type: 'TRANSFER', initiator: '李四', timestamp: '2025-05-25 14:22:57', status: '成功' }
    ];

    // 初始化统计数据
    document.getElementById('totalAssets').textContent = mockAssets.length;
    document.getElementById('todayNew').textContent = 2;
    document.getElementById('totalTransactions').textContent = mockTransactions.length;

    // 初始化交易表格
    const transactionsTable = document.getElementById('transactionsTable');
    if (mockTransactions.length > 0) {
      transactionsTable.innerHTML = '';
      mockTransactions.forEach(tx => {
        const row = document.createElement('tr');
        row.className = 'hover:bg-gray-50 transition-colors';
        row.innerHTML = `
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${tx.txId}</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${tx.assetId}</td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${tx.type === 'CREATE' ? 'bg-green-100 text-green-800' : 'bg-purple-100 text-purple-800'}">
              ${tx.type === 'CREATE' ? '创建' : '转移'}
            </span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${tx.initiator}</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${tx.timestamp}</td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
              ${tx.status}
            </span>
          </td>
        `;
        transactionsTable.appendChild(row);
      });
    }

    // 资产上链表单提交
    document.getElementById('createForm').addEventListener('submit', function(e) {
      e.preventDefault();
      const formData = new FormData(this);
      const assetData = {
        id: formData.get('createId'),
        owner: formData.get('createOwner'),
        name: formData.get('createName'),
        info: formData.get('createInfo')
      };

      // 模拟API调用
      simulateApiCall('create', assetData)
        .then(result => {
          // 显示结果
          const createOutput = document.getElementById('createOutput');
          createOutput.textContent = JSON.stringify(result, null, 2);
          document.getElementById('createResult').classList.remove('hidden');
          
          // 更新统计数据
          document.getElementById('totalAssets').textContent = parseInt(document.getElementById('totalAssets').textContent) + 1;
          document.getElementById('todayNew').textContent = parseInt(document.getElementById('todayNew').textContent) + 1;
          
          // 添加到模拟数据
          mockAssets.push(assetData);
          
          // 添加新交易记录
          const newTx = {
            txId: `TX-${new Date().getTime()}`,
            assetId: assetData.id,
            type: 'CREATE',
            initiator: assetData.owner,
            timestamp: new Date().toISOString().replace('T', ' ').substring(0, 19),
            status: '成功'
          };
          mockTransactions.unshift(newTx);
          document.getElementById('totalTransactions').textContent = mockTransactions.length;
          
          // 更新交易表格
          updateTransactionsTable();
          
          // 显示成功模态框
          showModal('成功', '资产上链操作已成功完成！', 'success');
        })
        .catch(error => {
          const createOutput = document.getElementById('createOutput');
          createOutput.textContent = error.message;
          document.getElementById('createResult').classList.remove('hidden');
          showModal('错误', error.message, 'error');
        });
    });

    // 资产查询
    document.getElementById('queryBtn').addEventListener('click', function() {
      const queryId = document.getElementById('queryId').value.trim();
      if (!queryId) {
        showModal('提示', '请输入要查询的资产ID', 'warning');
        return;
      }

      // 模拟API调用
      simulateApiCall('query', { id: queryId })
        .then(result => {
          // 显示结果
          document.getElementById('queryResult').classList.remove('hidden');
          document.getElementById('queryOutputId').textContent = result.id || '-';
          document.getElementById('queryOutputOwner').textContent = result.owner || '-';
          document.getElementById('queryOutputName').textContent = result.name || '-';
          document.getElementById('queryOutputInfo').textContent = result.info || '-';
          
          // 更新交易记录
          const queryTransactions = document.getElementById('queryTransactions');
          const txs = mockTransactions.filter(tx => tx.assetId === queryId);
          if (txs.length > 0) {
            queryTransactions.innerHTML = '';
            txs.forEach(tx => {
              const p = document.createElement('p');
              p.className = 'py-1 border-b border-gray-100 last:border-0';
              p.innerHTML = `
                <span class="text-xs font-medium ${tx.type === 'CREATE' ? 'text-green-600' : 'text-purple-600'}">${tx.type === 'CREATE' ? '创建' : '转移'}</span>
                <span class="text-gray-500">于 ${tx.timestamp} 由 ${tx.initiator} 发起</span>
              `;
              queryTransactions.appendChild(p);
            });
          } else {
            queryTransactions.innerHTML = '<p class="text-gray-500 italic">暂无交易记录</p>';
          }
          
          showModal('成功', '资产查询操作已成功完成！', 'success');
        })
        .catch(error => {
          document.getElementById('queryResult').classList.remove('hidden');
          document.getElementById('queryOutputId').textContent = queryId;
          document.getElementById('queryOutputOwner').textContent = '-';
          document.getElementById('queryOutputName').textContent = '-';
          document.getElementById('queryOutputInfo').textContent = '-';
          document.getElementById('queryTransactions').innerHTML = '<p class="text-gray-500 italic">暂无交易记录</p>';
          showModal('错误', error.message, 'error');
        });
    });

    // 资产转移表单提交
    document.getElementById('transferForm').addEventListener('submit', function(e) {
      e.preventDefault();
      const formData = new FormData(this);
      const transferData = {
        id: formData.get('transferId'),
        owner: formData.get('transferOwner')
      };

      // 模拟API调用
      simulateApiCall('transfer', transferData)
        .then(result => {
          // 显示结果
          const transferOutput = document.getElementById('transferOutput');
          transferOutput.textContent = JSON.stringify(result, null, 2);
          document.getElementById('transferResult').classList.remove('hidden');
          
          // 更新模拟数据
          const assetIndex = mockAssets.findIndex(asset => asset.id === transferData.id);
          if (assetIndex !== -1) {
            mockAssets[assetIndex].owner = transferData.owner;
          }
          
          // 添加新交易记录
          const newTx = {
            txId: `TX-${new Date().getTime()}`,
            assetId: transferData.id,
            type: 'TRANSFER',
            initiator: transferData.owner,
            timestamp: new Date().toISOString().replace('T', ' ').substring(0, 19),
            status: '成功'
          };
          mockTransactions.unshift(newTx);
          document.getElementById('totalTransactions').textContent = mockTransactions.length;
          
          // 更新交易表格
          updateTransactionsTable();
          
          showModal('成功', '资产转移操作已成功完成！', 'success');
        })
        .catch(error => {
          const transferOutput = document.getElementById('transferOutput');
          transferOutput.textContent = error.message;
          document.getElementById('transferResult').classList.remove('hidden');
          showModal('错误', error.message, 'error');
        });
    });

    // 模拟API调用
    function simulateApiCall(type, data) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          try {
            if (type === 'create') {
              // 检查ID是否已存在
              const exists = mockAssets.some(asset => asset.id === data.id);
              if (exists) {
                throw new Error(`资产ID "${data.id}" 已存在`);
              }
              resolve({ message: '资产创建成功', assetId: data.id });
            } else if (type === 'query') {
              // 查找资产
              const asset = mockAssets.find(asset => asset.id === data.id);
              if (!asset) {
                throw new Error(`资产ID "${data.id}" 不存在`);
              }
              resolve(asset);
            } else if (type === 'transfer') {
              // 检查资产是否存在
              const exists = mockAssets.some(asset => asset.id === data.id);
              if (!exists) {
                throw new Error(`资产ID "${data.id}" 不存在`);
              }
              resolve({ message: '资产转移成功', assetId: data.id, newOwner: data.owner });
            }
          } catch (error) {
            reject(error);
          }
        }, 800); // 模拟网络延迟
      });
    }

    // 更新交易表格
    function updateTransactionsTable() {
      const transactionsTable = document.getElementById('transactionsTable');
      transactionsTable.innerHTML = '';
      
      if (mockTransactions.length > 0) {
        mockTransactions.forEach(tx => {
          const row = document.createElement('tr');
          row.className = 'hover:bg-gray-50 transition-colors';
          row.innerHTML = `
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${tx.txId}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${tx.assetId}</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${tx.type === 'CREATE' ? 'bg-green-100 text-green-800' : 'bg-purple-100 text-purple-800'}">
                ${tx.type === 'CREATE' ? '创建' : '转移'}
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${tx.initiator}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${tx.timestamp}</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                ${tx.status}
              </span>
            </td>
          `;
          transactionsTable.appendChild(row);
        });
      } else {
        transactionsTable.innerHTML = `
          <tr class="text-center">
            <td colspan="6" class="px-6 py-12 text-gray-500">
              <div class="flex flex-col items-center">
                <i class="fa fa-history text-4xl mb-2 text-gray-300"></i>
                <p>暂无交易记录</p>
              </div>
            </td>
          </tr>
        `;
      }
    }

    // 模态框控制
    const modal = document.getElementById('modal');
    const modalContent = document.getElementById('modalContent');
    const modalTitle = document.getElementById('modalTitle');
    const modalBody = document.getElementById('modalBody');
    const modalBtn = document.getElementById('modalBtn');
    const closeModal = document.getElementById('closeModal');

    function showModal(title, message, type = 'info') {
      modalTitle.textContent = title;
      modalBody.innerHTML = `<p>${message}</p>`;
      
      // 设置按钮颜色
      if (type === 'success') {
        modalBtn.className = 'bg-secondary hover:bg-secondary/90 text-white px-6 py-2 rounded-lg font-medium btn-hover';
      } else if (type === 'error') {
        modalBtn.className = 'bg-error hover:bg-error/90 text-white px-6 py-2 rounded-lg font-medium btn-hover';
      } else if (type === 'warning') {
        modalBtn.className = 'bg-warning hover:bg-warning/90 text-white px-6 py-2 rounded-lg font-medium btn-hover';
      } else {
        modalBtn.className = 'bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg font-medium btn-hover';
      }
      
      // 显示模态框并添加动画
      modal.classList.remove('hidden');
      setTimeout(() => {
        modalContent.classList.remove('scale-95', 'opacity-0');
        modalContent.classList.add('scale-100', 'opacity-100');
      }, 10);
    }

    function hideModal() {
      modalContent.classList.remove('scale-100', 'opacity-100');
      modalContent.classList.add('scale-95', 'opacity-0');
      setTimeout(() => {
        modal.classList.add('hidden');
      }, 300);
    }

    modalBtn.addEventListener('click', hideModal);
    closeModal.addEventListener('click', hideModal);
    modal.addEventListener('click', (e) => {
      if (e.target === modal) {
        hideModal();
      }
    });

    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', () => {
      // 初始显示欢迎信息
      showModal('欢迎使用', '区块链资产管理系统 - 安全、透明、高效的资产数字化管理平台', 'info');
    });
  </script>
</body>
</html>
    